<template>
  <div>
    <br>
    <el-row>
      <el-col span="4">
        <el-button type="success" @click="btnSubmitWork" size="small">工作上报</el-button>
      </el-col>
    </el-row>
    <br/>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="workList"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="70">
      </el-table-column>
      <el-table-column
        prop="workTimeStr"
        label="时间"
        width="160">
      </el-table-column>
      <el-table-column
        prop="workContext"
        label="工作内容"
        width="180">
      </el-table-column>
      <el-table-column
        prop="workCount"
        width="80"
        label="工作量">
      </el-table-column>
      <el-table-column
        prop="workStateId"
        width="180"
        label="审核状态">
        <template slot-scope="scope">
            <span v-if="scope.row.workStateId == '1'">
              经理审核中
            </span>
            <span v-if="scope.row.workStateId == '2'">
                审核通过
            </span>
            <span v-if="scope.row.workStateId == '3'">
                审核驳回
            </span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-row>
            <el-button icon="el-icon-search" @click="btnDetail(scope.row.workStateId,scope.row.checkInfo)" size="small">审批详情</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="params.page"
      :page-size="params.size"
      style="float: right;"
      layout="total, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
    <el-dialog width="400px" title="工作上报" :visible.sync="dialogFormVisible">
      <el-form ref="form" :rules="rules" :model="form">
        <el-row>
          <el-col span="24">
            <el-form-item prop="workTime" label="工作时间：" :label-width="formLabelWidth">
              <el-date-picker v-model="form.workTime" type="date" placeholder="选择日"
                              :picker-options="pickerOptions"    value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="24">
            <el-form-item prop="workContext" label="工作内容：" :label-width="formLabelWidth">
              <el-input size="small" clearable
                        v-model="form.workContext"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="24">
            <el-form-item prop="workCount" label="工作量：" :label-width="formLabelWidth">
              <el-input-number size="small" v-model="form.workCount" :min="1" :max="99999999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="24">
            <el-form-item prop="nextDayPlan" label="明天计划：" :label-width="formLabelWidth">
              <el-input size="small" clearable v-model="form.nextDayPlan"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog  width="300px"  title="工作上报" :visible.sync="dialogDetailVisible">
      <el-form>
           <el-row>
             <el-col  span="10">
               <span>审核状态：</span>
             </el-col>
             <el-col  span="14">
               <span v-text="checkStatus"></span>
             </el-col>
           </el-row>
           <el-row>
             <el-col  span="10">
               <span>审核评语：</span>
             </el-col>
             <el-col span="14">
               <span v-text="checkInfo"></span>
             </el-col>
           </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="btnDetailTrue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import * as workApi from '../api/work'
  export default {
    components: {
      ElRow
    },
    data() {
      return {
        loading: false,
        workList: [],
        personName: '',
        crop: '',
        cropList: [],
        total: 0,
        params: {
          page: 1,
          size: 5
        },
        activeName: 'second',
        dialogFormVisible: false,
        dialogDetailVisible: false,
        checkStatus: '',
        checkInfo: '',
        form: {
          workTime: '',
          workContext: '',
          workCount: 0,
          nextDayPlan: '',
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        formLabelWidth: '120px',
        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          workTime: [
            {required: true, message: '工作时间不可为空', trigger: 'blur'}
          ],
          workContext: [
            {required: true, message: '工作内容不可为空', trigger: 'blur'}
          ],
          workCount: [
            {required: true, message: '工作量不可为空', trigger: 'blur'}
          ],
          nextDayPlan: [
            {required: true, message: '明天计划不可为空', trigger: 'blur'}
          ],
        },
      };
    },
    methods: {
      btnSubmit(){
        // 为表单绑定验证功能
        this.$refs['form'].validate((valid) => {
          if (valid) {
            var params = this.form
            workApi.insertWork(params).then((res)=>{
                if(res.success == true){
                  this.$message({
                    type: 'success',
                    message: res.message
                  });
                  this.dialogFormVisible=false
                  this.wordPage(this.params.page, this.params.size)
                }else {
                  this.$message({
                    type: 'error',
                    message: res.message
                  });
                }
            })
          } else {
            this.$notify.error({
              title: '系统提示',
              message: '请先填写必填项！',
              duration: 2000
            });
          }
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      btnSubmitWork() {
        this.form.workTime = ''
        this.form.workContext = ''
        this.form.workCount = 0
        this.form.nextDayPlan = ''
        this.dialogFormVisible = true
      },
      wordPage(pageNum,pageSize){
        this.loading = true
        var params = {
          pageNum: pageNum,
          pageSize: pageSize
        }
       workApi.selectWorkPage(params).then((res)=>{
         if(res.success == true){
            this.workList = res.object.list
            this.total = res.object.total
           this.loading = false
         }else {
           this.$router.push("/login");
           this.loading = false
         }
       })
      },
      btnDetail(status,info){
        this.dialogDetailVisible=true
        if(status == '1'){
          this.checkStatus = '经理审核中'
        }else if(status == '2'){
          this.checkStatus = '审核通过'
        }else if(status == '3'){
          this.checkStatus = '审核驳回'
        }
        this.checkInfo = info
      },
      btnDetailTrue(){
        this.dialogDetailVisible=false
        this.checkStatus = ''
        this.checkInfo = ''
      },
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.params.size = val
        // 点击每页显示的条数时，显示第一页
        this.wordPage(1, this.params.size)
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.params.page = 1
      },
      handleCurrentChange(val) {
        // 改变默认的页数
        this.params.page = val
        // 切换页码时，要获取每页显示的条数
        this.wordPage(this.params.page, this.params.size)
      },
    },
    mounted() {
      this.wordPage(this.params.page, this.params.size)
    }
  };
</script>

<style>


</style>
